<template>
    <topbar>历史计划</topbar>
    <div class="content">
        <el-scrollbar height="750px">
            <el-space wrap :size="30">
                <el-card style="width: 480px; height: 244px;" shadow="hover" v-for="value in historyItem">
                    <template #header>
                        <div class="card-header">
                            <span>{{value.createTime}}</span>
                        </div>
                    </template>
                     <el-scrollbar height="90px">
                        <div class="cardContent" v-for="item,index in value.array">
                             <span class="text item">{{index+1+'.'+item.title}}</span>
                             <span :class="{complete:item.status,uncomplete:!item.status}">{{item.status ? '已完成':'未完成'}}</span>
                        </div>
                     </el-scrollbar>
                    <template #footer>完成率:{{value.completeRate}}%</template>
                </el-card>
            </el-space>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import topbar from './topbar.vue';
let historyItem = reactive([])
onMounted(()=>{
    historyItem.push(...JSON.parse(localStorage.getItem("history")))
})
</script>

<style scoped>
.content{
     height: 750px
}
.el-space{
    display: flex;
    justify-content: center;
}
.cardContent{
    display: flex;
    justify-content: space-between;
    margin: 5px;
}
.complete{
    font-size: 15px;
    color: greenyellow;
}
.uncomplete{
    font-size: 15px;
    color: grey;
}
</style>